<template>
  <div class="about">
    <div v-if="form.teachingbuildingArr.length">
      <el-row class="building">
        <el-col v-for="item in form.teachingbuildingArr" :key="item.id" class="buildingItem">
          <el-card :body-style="{ padding: '0px' }">
            <!-- <img src="../assets/room.jpg" class="image" /> -->
            <div style="padding: 14px;" class="buildingInfo">
              <div class="buildingInfo1">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="`教学楼名称：${item.name}`"
                    placement="right"
                  >
                    <span>教学楼名称：{{ item.name }}</span>
                  </el-tooltip>
                </div>
                <div>
                  <span>教学楼编号：{{ item.id }}</span>
                </div>
              </div>
              <div class="btngroup">
                <el-button @click="modify(item)" type="warning" plain size="mini">修改</el-button>

                <el-dialog title="修改教学楼信息" :visible.sync="dialogFormVisible">
                  <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item label="教学楼名称" prop="teachingbuilding">
                      <el-input v-model="form.teachingbuilding"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modifyConfirm()">确 定</el-button>
                  </div>
                </el-dialog>
                <el-button @click="open(item.id)" type="danger" plain size="mini" class="delBtn">删除</el-button>
                <el-button
                  type="success"
                  @click="roomInfo(item)"
                  plain
                  size="mini"
                  class="delBtn"
                >查看教室</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-else class="kong">
      <img src="../assets/container-nodata-icon.svg" />
      <br />暂无数据，请新增
    </div>
    <el-button class="btn" type="primary" plain @click="add()">新增教学楼</el-button>
  </div>
</template>

<script>
import bus from "../plugins/bus";

export default {
  data() {
    return {
      form: {
        teachingbuilding: "",
        teachingbuildingid: "",
        teachingbuildingArr: [],

        tableData: [],
      },
      dialogFormVisible: false,
      rules: {
        teachingbuilding: [
          { required: true, message: "教学楼必输！", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    console.log(this.$route.meta.keepAlive);
    this.getBuilding();
  },

  methods: {
    // 删除弹框
    open(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确定删除
          this.$axios({
            url: "/api/deleteBuilding",
            method: "post",
            data: {
              id: String(id),
            },
          }).then((res) => {
            if (res._RejCode === "00000000") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getBuilding();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取教学楼
    getBuilding() {
      this.$axios({
        url: "/api/buildingQ",
        method: "post",
        data: {},
      }).then((res) => {
        if (res._RejCode === "00000000") {
          this.form.teachingbuildingArr = res.buildings;
        }
      });
    },

    // 新增
    add() {
      this.$router.push({
        path: "/addbuilding",
      });
    },
    // 删除
    del(id) {
      this.$axios({
        url: "/api/deleteBuilding",
        method: "post",
        data: {
          id: String(id),
        },
      }).then((res) => {
        if (res._RejCode === "00000000") {
          this.$message({
            message: "删除成功",
            type: "success",
          });

          this.getBuilding();
        }
      });
    },
    modify(item) {
      this.dialogFormVisible = true;
      this.form.teachingbuildingid = item.id;
    },
    // 修改确认
    modifyConfirm() {
      if (this.form.teachingbuilding != "") {
        this.$axios({
          url: "/api/updateBuilding",
          method: "post",
          data: {
            id: String(this.form.teachingbuildingid),
            name: String(this.form.teachingbuilding),
          },
        }).then((res) => {
          if (res._RejCode === "00000000") {
            this.form.teachingbuilding = "";
            this.dialogFormVisible = false;
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getBuilding();
          }
        });
      } else {
        this.$message({
          message: "必输项不能为空",
          type: "info",
        });
      }
    },

    // 查看教室信息
    roomInfo(item) {
      this.$router.push({
        name: "roomInfo",
        params: {
          data: item,
        },
      });
    },
  },
};
</script>
<style scoped>
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.building {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: space-between; */
}
.buildingInfo1 {
  display: flex;
  flex-direction: column;
}
.buildingItem {
  margin: 30px 0px 0px 50px;
  width: 300px;
}
/* .buildingItemOne {
  width: 300px;
  height: 350px;
} */
/* .image {
  height: 350px;
} */

/* .imageone {
  width: 300px;
  height: 350px;
} */
.btn {
  width: 300px;
  margin-top: 30px;
}

.buildingInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buildingInfo > span {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btngroup {
  display: flex;
  flex-direction: column;
}
.delBtn {
  margin: 0;
  margin-top: 5px;
}
.kong {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kong > img {
  width: 500px;
}
</style>
